<div class="layui-fluid" id="VIEW-group" lay-title="角色管理">
        <div class="layui-card" id="role_add" style="display: none;">
            <div class="layui-card-body layui-row layui-col-space10">
                <div class="layui-card-body" style="padding: 15px;">
                    <form class="layui-form" action="" id="form_role_add" lay-filter="role_add">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>角色名:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="roleName" placeholder="角色名" lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">角色备注:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="roleRemarks" placeholder="角色备注" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>状态:</label>
                                <div class="layui-input-inline">
                                    <div class="layui-col-md6">
                                        <select name="state">
                                            <option value="1">正常</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item"style="width:100%">
                            <label class="layui-form-label">权限列表:</label>
                            <div class="layui-input-inline" style="width: 70.5%">
                                <ul id="PermissionTree" name="PermissionTree" class="dtree" style="width: 500px;" data-id="0"></ul>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="form-role-submit">保存</button>
                                <button type="reset" id="role_add_reset" class="layui-btn layui-btn-primary">清除</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="layui-card" id="role_edit" style="display: none;">
            <div class="layui-card-body layui-row layui-col-space10">
                <div class="layui-card-body" style="padding: 15px;">
                    <form class="layui-form" action="" lay-filter="form-group">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label"><span class="xing">*</span>角色名:</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="roleName" name="roleName" placeholder="角色名" lay-verify="required" autocomplete="off" class="layui-input">
                                    <input type="hidden" id="hidId" name="hidId">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">角色备注:</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="roleRemarks" name="roleRemarks" placeholder="角色备注" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item"style="width:100%">
                            <label class="layui-form-label">权限列表:</label>
                            <div class="layui-input-inline" style="width: 70.5%">
                                <ul id="showPermissionTree" name="showPermissionTree" class="dtree" style="width: 500px;" data-id="0"></ul>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="form-role-edit">确认修改</button>
                                <button type="reset" class="layui-btn layui-btn-primary">清除</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <div class="layui-card">
        <div class="layui-card-header">
            <i class="layui-icon layui-icon-team"></i>&nbsp;角色管理
        </div>
        <div class="layui-row" style="width: 98%;margin: 0 auto;">
            <div class="layui-card-body">
                <table id="role-table" class="layui-hide" lay-filter="role-table"></table>
            </div>
        </div>
    </div>
    <script type="text/html" id="role_bar">
        <a class="layui-btn layui-btn-xs" style="background-color: #00d57b;" lay-event="add"><i class="layui-icon">&#xe654;</i>新增</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>

    </script>
    <script type="text/html" id="role_line_bar">
        {{#  if(d.state == '1'){ }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="stop"><i class="layui-icon">&#xe89a;</i>停用</a>
        {{#  } else if(d.state == "0"){ }}
        <a class="layui-btn layui-btn-xs" style="background-color: #00d57b;" lay-event="start"><i class="layui-icon">&#xe78b;</i>启用</a>
        {{#  } }}
        <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe83f;</i>编辑</a>
    </script>

</div>
<script>
    layui.use(['admin', 'table', 'form', 'dropdown', 'jquery','laydate','selectN','selectM','dtree'], function (admin, table, form, dropdown, $) {
        var view = $('#VIEW-list-table');
        var $ = layui.$
            , admin = layui.admin
            , element = layui.element
            , layer = layui.layer
            , laydate = layui.laydate
            ,selectN = layui.selectN
            ,selectM = layui.selectM
            ,dtree = layui.dtree
            , form = layui.form
            ,index
            ,showPermissionTree;
        form.render();

        //加载树
        var permissionListTree=dtree.renderSelect({
            elem: "#PermissionTree",
            url: "api/v1/ucenter/sys-permission/permissionsTree/a",
            dataFormat: "list",  //配置data的风格为list
            skin: "layui",
            initLevel: "5", //默认为2
            line: true,
            checkbar: true, //开启复选框
            checkbarType: "no-all", // 默认就是all，其他的值为： 半选no-all  单项级联p-casc   单独self  单选only
            done:function () {
                $("#PermissionTree").css("width","500px");
            }
        });
        // 绑定节点点击事件
        dtree.on("node(PermissionTree)", function(obj){
            var nodeId = obj.param.nodeId;
            permissionListTree.clickNodeCheckbar(nodeId);// 点击节点选中复选框

        });
        // 绑定节点点击事件
        dtree.on("node(showPermissionTree)", function(obj){
            var nodeId = obj.param.nodeId;
            showPermissionTree.clickNodeCheckbar(nodeId);// 点击节点选中复选框
        });
        /* 监听修改提交 */
        form.on('submit(form-role-edit)', function (data) {
            var role = '';
            admin.put({
                api: "changeRole",
                data:{
                    "hidId":$("#hidId").val(),
                    "isSys":"0",
                    "roleName":data.field.roleName,
                    "roleRemarks":data.field.roleRemarks,
                    "permissionId":data.field.showPermissionTree_select_input
                },
                //请求成功
                success:function(res){
                    layer.close(index);
                    layer.msg(res.data);
                    table.reload('role-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });

                }
            });

            return false;
        });

        /* 监听提交 */
        form.on('submit(form-role-submit)', function (data) {
            admin.post({
                api: "addRole",
                data:{
                    "roleName":data.field.roleName,
                    "roleRemarks":data.field.roleRemarks,
                    "isSys":"0",
                    "state":data.field.state,
                    "permission":data.field.PermissionTree_select_nodeId
                },
                //请求成功
                success:function(res){
                    $("#role_add_reset").click();
                    layer.close(index);
                    layer.msg(res.data);
                    table.reload('role-table', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });

                }
            });
            return false;
        });

        table.render({
            elem: '#role-table'
            ,height: 'full-165'
            ,api: 'getRole' //数据接口
            ,title: '角色管理'
            ,page: true //开启分页
            ,even: true //开启隔行背景
            ,toolbar:'#role_bar'
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }

            ,cols: [[ //表头
                { title: '', type: 'checkbox', fixed: true, width: "5%" },
                { title: '角色id',field: 'roleId' ,width: "5%"},
                { title: '权限id',field: 'permissionId' ,width: 0, hide: true},
                { title: '角色名', field: 'roleName', width: "10%" },
                { title: '角色备注',field: 'roleRemarks', width: "10%" },
                { title: '权限名称',field: 'permissionName', width: "45%" },
                { title: '是否内置',field: 'isSys',templet: function(d){
                        if(d.isSys=="1"){
                            return "是";
                        }else if(d.isSys=="0"){
                            return "否";
                        }
                    }, width: "5%" },
                { title: '是否停用',field: 'state',templet: function(d){
                        if(d.state=="0"){
                            return "是";
                        }else if(d.state=="1"){
                            return "否";
                        }
                    }, width: "5%" },
                { fixed: 'right', title:'操作', toolbar: '#role_line_bar', width:"15%"}
            ]]
            ,done:function(){
                // 隐藏列
                $(".layui-table-box").find("[data-field='permissionId']").css("display","none");
                $("#role-table").css("width", "100%");
            }
        });
        var $ = layui.$, active = {
            reload: function(){
                //执行重载
                table.reload('role-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }

                }, 'data');
            }
        };
        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //监听行工具
        table.on('tool(role-table)', function(obj){
            var data = obj.data;
            var permid = data.permissionId.split(',');
            if(obj.event === 'edit'){
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['800px','600px']
                    ,title:'修改数据'
                    ,content: $('#role_edit')
                });
                $("#roleName").val(data.roleName);
                $("#roleRemarks").val(data.roleRemarks);
                var select = 'dd[lay-value=' + data.isSys + ']';
                $('#isSys').siblings("div.layui-form-select").find('dl').find(select).click();
                $("#dataPerm").val(data.dataPerm);
                $("#hidId").val(data.roleId);
                $("#permission_edit").val(data.permissionId);
                if(showPermissionTree != undefined){
                    dtree.reload("showPermissionTree",{
                        url: "api/v1/ucenter/sys-permission/permissionsTree/"+data.roleId
                    });
                }
                else if(showPermissionTree == undefined){
                    //加载树
                    showPermissionTree =dtree.renderSelect({
                        elem: "#showPermissionTree",
                        url: "api/v1/ucenter/sys-permission/permissionsTree/"+data.roleId,
                        dataFormat: "list",  //配置data的风格为list
                        checkbar: true, //开启复选框
                        skin: "layui",
                        checkbarType: "no-all",
                        line: true,
                        initLevel: "5", //默认为2
                        done: function(res, $ul, first){
                            var val = "";
                            for (var i = 0; i <dtree.getCheckbarNodesParam("showPermissionTree").length; i++) {
                                val+=dtree.getCheckbarNodesParam("showPermissionTree")[i].context+",";
                            }
                            $("#showPermissionTree_select_input_id").val(val.substr(0,val.length-1));

                            $("#showPermissionTree").css("width","500px");
                        }
                    });
                }
            }
            else {
                admin.put({
                    api: "updateRole",
                    data:{
                        "hidId":data.roleId,
                        "way":obj.event
                    },
                    //请求成功
                    success:function(res){
                        if (res.success && res.code == 2000) {
                            layer.msg("已成功操作数据");
                        }
                        table.reload('role-table', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }
                });
            }

        });
        //头工具栏事件
        table.on('toolbar(role-table)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            var tips="";
            var id="";
            if(obj.event === 'add'){
                index = layer.open({
                    type: 1
                    ,anim: 5
                    ,shade: 0
                    ,maxmin: false
                    ,area:['800px','600px']
                    ,title:'新增数据'
                    ,content: $('#role_add')
                });

            }
            else if(obj.event === 'del'){
                layer.confirm('是否删除？', {
                    btn: ['确认','取消'] //按钮
                }, function(){
                        tips="已删除";
                        if(checkStatus.data.length==0){
                            layer.msg("请至少选择一条数据！");
                            return false;
                        }
                        for(var i=0; i<checkStatus.data.length; i++){
                            id+=checkStatus.data[i].roleId+",";
                        }
                        admin.delete({
                            api: "deleteRole",
                            data: {
                                "roleId":id,
                            },
                            success: function(res) {
                                if (res.success && res.code == 2000) {
                                    layer.msg(tips);
                                }
                                table.reload('role-table', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            }
                        });
                });
            }

        });

    })
</script>